<script setup lang="ts">
import Limit from "./Limit.vue";
import limitComponents from "./config";
import type { PropType } from "vue";
const props = defineProps({
  modelValue: {
    type: Object,
    default: () => {
      return { joinOperator: "And", children: [] };
    },
  },
  options: {
    type: Array as PropType<Array<string>>,
    required: true,
  },
  disabled: {
    type: Boolean,
    default: false,
  },
});

const emits = defineEmits(["update:modelValue"]);

const limitRef = ref();

provide("limitOptions", props.options);
provide("limitDisabled", props.disabled);

const addlimit = (key: any) => {
  if (Object.keys(props.modelValue).length === 0) {
    props.modelValue.joinOperator = "And";
    props.modelValue.children = [];
  }
  props.modelValue["children"].push({
    joinOperator: "And",
    children: [{ key, joinOperator: "And", value: [] }],
  });
  emits("update:modelValue", props.modelValue);
  nextTick(() => {
    console.log(limitRef.value.add)
    limitRef.value.add();
  });
};
</script>
<template>
  <div class="limit-container">
    <Limit
      ref="limitRef"
      v-model:limit="modelValue"
      :level="0"
      style="margin-top: 10px"
    ></Limit>
    <el-dropdown @command="addlimit">
      <el-button type="primary" icon="plus" v-if="!disabled"> 添加条件组 </el-button>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item v-for="item in options" :command="item">{{
            limitComponents[item].name
          }}</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>
<style lang="scss" scoped>
.limit-container {
  width: 100%;
}
</style>
